/**
 * 用户登录界面
 * 
 * @author Indolphin
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reducerType } from '../../store/reducers';
import { loginUser } from '../../store/actions';
import { Form, Input, Button, Checkbox, Image } from 'antd';
import './Login.less';
import { Dispatch } from 'redux';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 24 },
};

const tailLayout = {
    wrapperCol: { span: 24 },
};
  
const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
};

interface IProps {
  history: any,
  login: Function,
  username: string
}

interface IState {

}

class Login extends Component<IProps, IState> {

    submit = (values: any) => {
      console.log("form = ", this.props);
      console.log('Success:', values);
      const { username, password } = values;
      this.props.login({
        username,
        password,
        rememberme: false
      });
    }

    render() {

        const { username } = this.props;
        if(username && username.length > 0) {
          this.props.history.push("/");
        }

        return (
            <div className='login'>
                <div className='login-content'>
                  <div className='login-content-title'>
                    Stone基础平台
                  </div>
                  <Form className='login-form'
                    {...layout}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={this.submit}
                    onFinishFailed={onFinishFailed}
                  >
                    <Form.Item
                      name="username"
                      rules={[{ required: true, message: '用户名为必填项' }]}
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      name="password"
                      rules={[{ required: true, message: '密码为必填项' }]}
                    >
                      <Input.Password />
                    </Form.Item>

                    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                      <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                      <Button type="primary" htmlType="submit" block>
                        登录
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state: reducerType) {
  return {
    username: state.user.username
  };
}

function mapDispatchToProps(dispatch: Dispatch) {
  return {
    login: ({username, password, rememberme}: any) => {dispatch(loginUser({username, password, rememberme}))}
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);
// export default connect((state: reducerType) => {
//   return {
//     username: state.user.username
//   }
// }, (dispatch) => ({
//   loginUser: ({username, password, rememberme}: any) => {dispatch(loginUser({username, password, rememberme}))}
// }))(Login);